<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <script defer th:src="@{https://use.fontawesome.com/releases/v5.7.1/js/all.js}"></script>

	<link th:href="@{//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
	<link th:href="@{//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
	<link th:href="@{/admin/css/style.min.css}" rel="stylesheet" type="text/css"/>
	<link th:href="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css}" rel="stylesheet"/>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

	<script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
	<script th:src="@{//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
	<script th:src="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js}"></script>
	<script th:src="@{/admin/js/jquery.app.js}"></script>
	<script th:src="@{/admin/js/base.js}"></script>

    <link id="theme-style" rel="stylesheet" th:href="@{/assets/css/theme-7.css}">
</head>

<body style="height: 100%">
<div th:replace="~{blog/common.html::sidebar}" id="sidebar"></div>
    <div class="main-wrapper" style="height: 100%;position: relative;background-color: rgb(246,246,246);">
	    <section th:style="'background:url(/admin/images/bg/6.jpg)'" class="col-xs-12 col-sm-6 col-md-6 col-lg-12 grid">
		    <div class="container text-center">
			    <h2 class="heading">DevBlog - A Blog Made For Myself</h2>
			    <div class="intro">Welcome to my blog. Subscribe and get my latest blog post in your inbox.</div>
			    <form class="signup-form form-inline justify-content-center pt-3">
                    <div class="form-group">
                        <label class="sr-only" for="semail">Your email</label>
                        <input type="email" id="semail" name="semail1" class="form-control mr-md-1 semail" placeholder="Enter email">
                    </div>
                    <button type="button" class="btn btn-primary">Subscribe</button>
                </form>
		    </div>
	    </section>
		<div class="clearfix"></div>
	    <section class="col-xs-12 col-sm-11 col-md-20 col-lg-20 grid mainclass"  style="display: flex;justify-content: space-around;">
		    <div  style="width: 50%;">
			    <div class="item mb-2" th:each="article:${articles.list}">
				    <div class="media">
					    <img class="mr-5 img-fluid post-thumb d-none d-md-flex" style="width:200px;height:200px" th:src="@{/assets/images/blog/blog-post-thumb-1.jpg}" alt="image">
					    <div class="media-body">
						    <h3 class="title mb-1"><a style="font-size: 1.3em" th:href="@{/article/toPost(id=${article.getId()})}" th:text="${article.getTitle()}"></a></h3>
						    <div class="meta mb-1">
								<span class="date" style="font-size: 2em" th:text="${article.getPublishTime()}"></span>
								<span class="time" th:text="${article.getReadCount()+' read'}"></span>
								<span class="comment" th:text="${article.getCommentCount()}+' comments'"></span>
							</div>
						    <div class="intro" th:text="${article.getIntroduction()}"></div>
						    <a class="more-link" th:href="@{/article/toPost(id=${article.getId()})}">Read more &rarr;</a>
					    </div>
				    </div>
			    </div>
				<div th:replace="comm/macros :: pageAdminNav2(${articles})"></div>
		    </div>
<!--			am-u-lg-4 am-u-sm-12 am-u-lg-offset-0 am-u-sm-offset-0 sidebar-container-->
			<div class="right-bar-enabled" style="width: 40%;font-size: 20px">
				<section>
					<section>
						<div class="sidebar-header">
                <span class="sidebar-header-title">
                    搜索文章
                </span>
						</div>
						<div class="sidebar-search">
							<form method="get" onsubmit="return false;" accept-charset="utf-8">
								<div class="input-group" style="width: 50%" >
									<input type="text" class="form-control" th:value="${keywords}" oninput="searchArticle()" name="keywords" id="searchbox" placeholder="输入关键字搜索">
									<span class="input-group-btn">
        								<a class="btn btn-default" id="search" href="">
											<span class="glyphicon glyphicon-search" aria-hidden="true">查询</span>
										</a>
										<a class="btn btn-default" id="reset" href="/user/toIndex">
											<span class="glyphicon glyphicon-reset" aria-hidden="true">重置</span>
										</a>
     	 							</span>
								</div>
							</form>
						</div>
					</section>
					<section>
						<div class="sidebar-header">
                <span class="sidebar-header-title">
                    热门标签
                </span>
						</div>
						<div class="tags" style="width: 80%">
							<a th:each="c : ${tags}" rel="tag" th:href="@{/user/toIndex(tag=${c.name})}">
								<span th:class="'btn btn-'+${@adminCommons.rand_color()}+' waves-effect waves-light'" th:text="${c.name}+'('+${c.count}+')'"></span>
							</a>
						</div>
					</section>
					<section>
						<div class="sidebar-header">
                <span class="sidebar-header-title">
                    最新发布
                </span>
						</div>
						<div class="sidebar-list">
							<ul class="sidebar-list-body sidebar-list-items">
								<li class="sidebar-list-item" th:each="article,count:${latestArticle}" th:if="${count.count<=8}">
									<a class="tag tooltipped tooltipped-n" th:href="@{/article/toPost(id=${article.getId()})}" th:text="${article.title}"></a>
								</li>
							</ul>
						</div>
					</section>
					<section>
						<div class="sidebar-header">
                <span class="sidebar-header-title">
                    点击最多
                </span>
						</div>
						<main class="sidebar-lists">
							<ul>
								<li class="sidebar-list-item" th:each="article,count:${clickMostArticle}" th:if="${count.count<=8}">
									<a class="tag tooltipped tooltipped-n" th:href="@{/article/toPost(id=${article.getId()})}" th:text="${article.title}"></a>
								</li>
							</ul>
						</main>
					</section>
				</section>
			</div>
	    </section>
		<footer  th:replace="~{blog/common.html::footer}"></footer>
    </div>
    <div th:replace="~{blog/common.html::diyTheme}"></div>



    <script th:src="@{/assets/plugins/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/plugins/popper.min.js}"></script>
    <script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/plugins/bootstrap/css/bootstrap.css}"></script>

    <script th:src="@{/assets/js/demo/style-switcher.js}"></script>


</body>
</html>
<script type="text/javascript">
	$(function () {
		let url ='?page=1&keywords=';
		$('#search').attr("href",url);
	})
	function searchArticle() {
		let url ='?page=1&keywords=';
		let val = $('#searchbox').val();
		console.log('val',val)
		url = url + val;
		$('#search').attr("href",url);
	}
</script>
<style>
	html,body{
		height: 100%;
		width: 100%;

	}
	.mainclass{
		margin: 30px 100px;
	}

</style>

